<template>
	<view style="width: 92vw;margin: auto;">
		<view class="imgBox">
			<view class="leftBox" id="left">
				<view class="imgItem" :style="{ height: item.height+ 'rpx' }" v-for="(item, index) in lList">
					<view class="more">
						<u-icon name='more-dot-fill' color='#fff' @click.stop='openSelect(item)' />
					</view>
					<image @click='clickImage(item.url)' class="img" mode="aspectFill" :src="item.url"></image>
				</view>
			</view>
			<view class="rightBox" id="right">
				<view class="imgItem" :style="{ height: item.height+ 'rpx' }" v-for="(item, index) in rList">
					<view class="more">
						<u-icon name='more-dot-fill' color='#fff' @click.stop='openSelect(item)' />
					</view>
					<image @click='clickImage(item.url)' class="img" mode="aspectFill" :src="item.url"></image>
				</view>
			</view>
		</view>
		<root-portal>
			<u-action-sheet :actions="columns" :show="show" @close='show=false' @select="confirm"
				closeOnClickOverlay></u-action-sheet>
			<u-modal :show="delShow" content='是否确认删除？' showCancelButton @confirm='Del'
				@cancel='delShow=false'></u-modal>
		</root-portal>
	</view>
</template>

<script>
	export default {
		props: ['lList', 'rList'],
		data() {
			return {
				delShow: false,
				show: false,
				item: null,
				columns: [{
					name: '删除'
				}]
			};
		},
		methods: {
			clickImage(url) {
				let urlList = []
				this.lList.forEach((item, index) => {
					urlList.push(item)
					urlList.push(this.rList[index])
				})

				uni.previewImage({
					urls: urlList.map(item => item.url),
					current: url
				});
			},
			openSelect(item) {
				this.item = item
				this.show = true
			},
			confirm(e) {
				const value = e.name
				if (value == '删除') {
					this.delShow = true
				}
			},
			Del() {
				this.delShow = false
				uni.showLoading({
					title: '删除中 ...'
				})
				this.$api_company.Image.DelMedia(this.item.id).then(res => {
					uni.hideLoading()
					this.$emit('del', this.item.id)
					this.show = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.message)
				})
			}
		}

	};
</script>

<style lang="scss">
	.imgBox {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.leftBox,
		.rightBox {
			width: 49%;
			margin-bottom: auto;

			.imgItem {
				position: relative;
				box-shadow: 0 0 10rpx #ddd;
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 8rpx;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.more {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: rgba(0, 0, 0, 0.3);
		padding: 10rpx;
		z-index: 1;
		border-radius: 8rpx;
	}
</style>